<template>
	<view class="content">
		<!-- <view style="width: 100%; height: 80rpx; border: none; display: flex; justify-content: space-between; align-items: center; background-color: #fa341b">
			<view style="margin-left: 20rpx; color: #ffffff" @click="fanhui"> &lt </view>
			<view style="color: #ffffff; font-size: 30rpx; font-weight: 800; margin-right: 290rpx"> 意见反馈 </view>
		</view> -->
		<view class="kkk"></view>
		<view class="topp">
			<p style="font-size: 24rpx; font-weight: 800; color: #333333; margin-left: 20rpx">请选择反馈类型</p>
			<view style="width: 650rpx; height: 40rpx; margin-left: 20rpx; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center">
				<view style="width: 200rpx; height: 40rpx; display: flex" @click="xuan_a">
					<view v-if="xuan_zhong != 1" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50rpx"></view>
					<view v-if="xuan_zhong == 1" style="width: 30rpx; height: 30rpx; border-radius: 50rpx">
						<image style="width: 30rpx; height: 30rpx" src="../../../static/xuanzhong.png" mode=""></image>
					</view>
					<p style="color: #333333; font-size: 24rpx; margin-left: 7rpx">产品建议</p>
				</view>
				<view style="width: 200rpx; height: 40rpx; display: flex" @click="xuan_b">
					<view v-if="xuan_zhong != 2" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50rpx"></view>
					<view v-if="xuan_zhong == 2" style="width: 30rpx; height: 30rpx; border-radius: 50rpx">
						<image style="width: 30rpx; height: 30rpx" src="../../../static/xuanzhong.png" mode=""></image>
					</view>
					<p style="color: #333333; font-size: 24rpx; margin-left: 7rpx">服务需求</p>
				</view>
				<view style="width: 200rpx; height: 40rpx; display: flex" @click="xuan_c">
					<view v-if="xuan_zhong != 3" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50rpx"></view>
					<view v-if="xuan_zhong == 3" style="width: 30rpx; height: 30rpx; border-radius: 50rpx">
						<image style="width: 30rpx; height: 30rpx" src="../../../static/xuanzhong.png" mode=""></image>
					</view>
					<p style="color: #333333; font-size: 24rpx; margin-left: 7rpx">程序错误</p>
				</view>
			</view>
			<view style="width: 650rpx; height: 100rpx; background-color: #ffffff; border: 1rpx solid #f0f0f0; margin-left: 20rpx; margin-top: 20rpx; border-radius: 10rpx">
				<textarea style="width: 640rpx; height: 80rpx; margin-top: 10rpx" cols="24" rows="10" placeholder="请输入备注内容" v-model="content"></textarea>
			</view>
		</view>

		<view class="wancheng" @click="submitComments">完成</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			xuan_zhong: 1,
			content: "",
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#FE3548",
			animation: {
				duration: 400,
				timingFunc: "easeIn",
			},
		});
	},
	methods: {
		fanhui() {
			wx.switchTab({
				url: "../me_a",
			});
		},
		async submitComments() {
			if (!this.content) return uni.$showMsg("请填写内容之后再提交!");
			let obj = {
				uid: uni.getStorageSync("uid"),
				type: this.xuan_zhong,
				content: this.content,
			};
			const res = await this.$u.post("api/user/feedback_user", obj, {});
			this.content = "";
			uni.$showMsg(res.msg);
			console.log("res >>  ", res);
		},
		xuan_a() {
			this.xuan_zhong = 1;
		},
		xuan_b() {
			this.xuan_zhong = 2;
		},
		xuan_c() {
			this.xuan_zhong = 3;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100vh;
	background-color: #f5f8fd;
}
.kkk {
	width: 100%;
	height: 20rpx;
}
.topp {
	width: 690rpx;
	height: 250rpx;
	background-color: #ffffff;
	margin-left: 30rpx;
	border-radius: 10rpx;
	padding-top: 20rpx;
}
.wancheng {
	width: 690rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fa341b;
	color: #ffffff;
	text-align: center;
	margin-left: 30rpx;
	margin-top: 20rpx;
	border-radius: 10rpx;
	font-size: 32rpx;
}
</style>
